"use client";
/*
 * @Author: hongbin
 * @Date: 2025-05-01 12:11:45
 * @LastEditors: hongbin
 * @LastEditTime: 2025-05-01 16:41:47
 * @Description:
 */
import { FC, useEffect, useRef, useState } from "react";
import { styled } from "styled-components";
import * as ECharts from "echarts";

interface IProps {
    data: number[];
    color?: string;
}

/** 雷达图 */
const RadarChart: FC<IProps> = ({ data = [39, 47, 40, 84, 35, 90, 71], color = "#03b1f0" }) => {
    const divRef = useRef<HTMLDivElement>(null);
    const ChartRef = useRef<ECharts.ECharts>(null);
    // const [data, setData] = useState([39, 47, 40, 84, 35, 90, 71]);

    useEffect(() => {
        if (divRef.current) {
            const chart = ECharts.init(divRef.current);

            ChartRef.current = chart;

            let domWidth, domHeight;

            try {
                const { width, height } = divRef.current.getClientRects()[0];
                domWidth = width;
                domHeight = height;
                console.log(width, height);
            } catch (error) {
                console.log("获取 DOM 尺寸 失败", error);
            }

            const radius = 80;
            // 位置 是 相对于canvas的中心  dom的定位无关
            const centerX = domWidth ? domWidth / 2 : 100;
            const centerY = domHeight ? domHeight / 2 : 100;
            const squareSize = 16;

            // const imageUrl = "/public/arrow.png"; // 替换成你自己的 16x16 图片链接
            const imageUrl = "/上_grass.png"; // 替换成你自己的 16x16 图片链接

            const pathData =
                "M112.947933 859.977319l399.221424-422.215114 399.233704 422.215114-41.97602 1.49505-357.257683-345.263511L159.417291 859.977319 112.947933 859.977319zM112.947933 578.671469l399.221424-422.717557 399.233704 422.717557-41.97602 0.991584L512.17038 234.901984l-352.753089 343.769484L112.947933 578.671469z";
            const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" height="16px">
                        <path d="${pathData}" fill="${color}" />
                    </svg>`;
            const svgBlob = new Blob([svgContent], { type: "image/svg+xml" });
            const svgUrl = URL.createObjectURL(svgBlob);

            // 计算六个顶点位置和角度
            const graphics = [];
            for (let i = 0; i < 6; i++) {
                const angle = (Math.PI / 3) * i - Math.PI / 2;
                const x = centerX + radius * Math.cos(angle);
                const y = centerY + radius * Math.sin(angle);

                // 外层旋转方块
                graphics.push({
                    type: "group",
                    position: [x, y],
                    rotation: (Math.PI / -3) * i,
                    children: [
                        {
                            type: "rect",
                            shape: {
                                x: -squareSize / 2,
                                // 窄一些 放置和label重合
                                y: -squareSize / 2 / 2,
                                width: squareSize,
                                height: squareSize / 2,
                            },
                            style: {
                                // 和背景重色 以达到透明间隙
                                // 或者 用图片背景 重色
                                // fill: "#000",
                                fill: "transparent",
                            },
                            // 用z来覆盖下层
                            z: 2,
                        },
                        {
                            type: "image",
                            style: {
                                image: svgUrl,
                                x: -squareSize / 2,
                                y: -squareSize / 2,
                                width: squareSize,
                                height: squareSize,
                            },
                            z: 2,
                        },
                    ],
                });
            }

            const option = {
                backgroundColor: "transparent",
                radar: {
                    center: ["50%", "50%"],
                    radius: radius,
                    indicator: [
                        // 高度大一些 放置数字和边角重合
                        // TODO 动态调整
                        { name: "A", max: 10 + 3 },
                        { name: "B", max: 10 + 3 },
                        { name: "C", max: 10 + 3 },
                        { name: "D", max: 10 + 3 },
                        { name: "E", max: 10 + 3 },
                        { name: "F", max: 10 + 3 },
                    ],
                    shape: "polygon",
                    splitNumber: 2,
                    axisName: {
                        color: "#ccc",
                        fontWeight: "bold",
                    },
                    splitLine: {
                        lineStyle: {
                            color: color + "66" || "#1E8F38",
                            width: 1,
                        },
                    },
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        type: "radar",
                        data: [
                            {
                                value: [10, 6, 4, 10, 7, 8],
                                areaStyle: {
                                    color: color + "77",
                                },
                                lineStyle: {
                                    color: color,
                                },
                                itemStyle: {
                                    color: color,
                                },
                                label: {
                                    show: true,
                                    color: color,
                                    fontSize: 12,
                                    // 尽量减少文字和镂空部分重叠
                                    position: "right",
                                    distance: 1,
                                    fontFamily: "MyCustomFont",
                                    formatter: function (params: any) {
                                        return params.value;
                                    },
                                    z: 3,
                                },
                            },
                        ],
                        z: 1,
                    },
                ],
                graphic: [
                    {
                        type: "circle",
                        left: "center",
                        top: "center",
                        shape: {
                            r: 4,
                        },
                        style: {
                            fill: color,
                        },
                    },
                    ...graphics,
                ],
            };

            chart.setOption(option);

            return () => {
                chart.dispose();
            };
        }
    }, []);

    useEffect(() => {
        if (ChartRef.current) {
            // console.log("更新data", data);
            ChartRef.current.setOption({
                radar: {
                    indicator: [
                        // 高度大一些 放置数字和边角重合
                        // TODO 动态调整
                        { name: "A", max: 100 + 3 },
                        { name: "B", max: 100 + 3 },
                        { name: "C", max: 100 + 3 },
                        { name: "D", max: 100 + 3 },
                        { name: "E", max: 100 + 3 },
                        { name: "F", max: 100 + 3 },
                    ],
                },
                series: [
                    {
                        data: [
                            {
                                value: data,
                                areaStyle: {
                                    color: color + "77",
                                },
                                lineStyle: {
                                    color: color,
                                },
                                itemStyle: {
                                    color: color,
                                },
                                label: {
                                    show: true,
                                    color: color,
                                    fontSize: 12,
                                    // 尽量减少文字和镂空部分重叠
                                    position: "right",
                                    distance: 1,
                                    fontFamily: "MyCustomFont",
                                    formatter: function (params: any) {
                                        return params.value;
                                    },
                                    z: 3,
                                },
                            },
                        ],
                    },
                ],
            });
        }
    }, [data]);

    return <ChartWarp ref={divRef}></ChartWarp>;
};

export default RadarChart;

const ChartWarp = styled.div`
    width: 240px;
    height: 240px;
    /* border: 1px solid #faa; */
`;
